<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.global.js"></script>
    <style>
        .box1{
            background-color: red;
            border: 1px solid black;
        }

        .box2{
            width: 100px;
            height: 100px;
            color: green;
        }
    </style>
</head>
<body>
<div id = 'app'>
    <div :style="myStyle">aaaa</div>
    <br>
    <div :style="myStyle2">bbb</div>
    <br>
    <div :style="myStyle3">ccc</div>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                myStyle: 'background-color: red;border: 1px solid black;width: 100px;height: 100px;color: green;',
                myStyle2:['background-color: red','border: 1px solid black','width: 100px','height: 100px','color: green'],
                myStyle3: {background: 'red',border: '1px solid black',width: '100px',height: '100px',color: 'green'}
            }
        },
    });
    let vm = app.mount('#app');

    setTimeout(()=>{
        //修改样式
        vm.myStyle2.push('background-color: skyblue')

        //修改样式
        vm.myStyle3.color = 'yellow'
    },2000)

</script>
</body>
</html>